[HTML] 드랍다운(Drop down)과 콤보박스(Combo box) 차이점은?

HTML 퍼블리싱에서 매우 자주사용되는 입력양식 중 하나로 콤보박스(Combo box) 그리고 드랍 박스 또는 드랍 리스(Drop Box or List)가 있습니다. 이 둘이 같은 것이 아니면 다른 것인지... 차이점이 있다면 무엇이고 어떤 특징이 있는지 알아보려고 합니다.

# 콤보박스와 드랍다운 리스트 이해하기

!! 콤보박스란?

콤보박스는 웹콤포넌트를 구성하는 하나의 UI입니다. 콤보박스를 통해 사용자에게 다양한 값을 리스트등의 형태로 제공하고 선택할 수 있도록 제공합니다.

!! 드랍다운 리스트란?

드랍다운 리스트는 값을 가지고 있는 리스트를 아래로 나열하여 보여주는 리스트입니다. 이 중 하나를 선택하는 Select 태그가 드랍다운 리스트라고 할 수 있습니다. 아래의 코드처럼 말이죠...




스크린샷) 일반적으로 쓰이는 콤보박스 형태

위는 두가지 인터페이스에 대한 개념입니다. 이를 통해 알 수 있는 것은 단순하게 리스트를 나열하는 것고 그 안에서 하나의 값을 선택할 수 있다면 그것은 분명 드랍다운 리스트(Dropdown List)이며 그보다 더 다양한 인터페이스, 선택 및 옵션기능을 가지고 있다면 이는 콤보박스로 불리는 것이 맞을 것입니다.


참고로 콤보박스에는 다양한 형태의 입력값을 별개로 가지는 인터페이스의 확장이 가능합니다. 예를 들어 타이핑이 가능한 input 형태의 리스트도 구현할 수 있을 것입니다. 또한 한개를 선택하는 것이 아니라 체크박스등을 리스트에 추가하여 복수개를 넣는 것 역시 콤보박스가 할 수 있는 부분입니다.

# 결론

콤보박스와 드랍다운 리스트 또는 박스는 비슷한 모습을 하고 있으나 제공하는 기능에 따라서 더 적합한 요소를 선택하는 것이 중요하다 할 수 있을 것입니다.